<template>
  <view class="ver-layout">
    <view class="score-total hor-layout-center">
      <image class="icon" src="@/static/home/ic_student_cscore.png"></image>
      <view class="text">总积分：{{ studentInfo.points }}</view>
    </view>
    <!--  操作区域  -->
    <view class="hor-layout action-layout">
      <view class="action-item ver-layout-center-all" @click="naviToPage(recordStudentCscoreRecord)">
        <!--  todo 图片替换      -->
        <image class="action-icon" src="@/static/home/ic_score_record.png"/>
        <view class="action-text">积分记录</view>
      </view>
      <view style="width: 12px"></view>
      <view class="action-item ver-layout-center-all" @click="naviToPage(recordStudentCscoreCharge)">
        <image class="action-icon" src="@/static/home/ic_score_excharge.png"/>
        <view class="action-text">积分兑换</view>
      </view>
    </view>
  </view>
</template>

<script>
import {recordStudentCscoreRecord, recordStudentCscoreCharge} from "@/router.js"
import {CscoreDetailApi} from "@/api/recordStudy.js"

let engine = new CscoreDetailApi()
export default {
  name: "cscore",
  data() {
    return {
      recordStudentCscoreRecord,
      recordStudentCscoreCharge,
      studentObj: {},
      studentInfo: {}
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.getStudentInfo()
  },
  methods: {
    naviToPage(page) {
      this.$u.route({url: page, params: {...this.studentObj}})
    },
    getStudentInfo() {
      let sid = this.studentObj.student_id
      let rid = this.studentObj.class_id
      engine.getStudentStudyInfo({sid, rid}).then(res => {
        this.studentInfo = res.data
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.score-total {
  margin: auto;
  margin-top: 18px;
  padding: 22px 12px;
  width: calc(100% - 24px);
  background: white;
  border-radius: 6px;
}

.score-total > .icon {
  width: 25px;
  height: 27px;
}

.score-total > .text {
  margin-left: 12px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  color: #333333;
}

.action-layout {
  margin: auto;
  margin-top: 18px;
  width: calc(100% - 24px);
}

.action-item {
  flex: 1;
  height: 120px;
  background: #FFFFFF;
  border-radius: 6px;
}

.action-icon {
  width: 25px;
  height: 26px;
}

.action-text {
  margin-top: 6px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  color: #333333;
}
</style>
